<template>
  <span>{{ enumVal }}</span>
</template>

<script setup>
  import { toObj } from '~/utils/base'
  import { getEnumObj } from '~/utils/enum'

  const props = defineProps({
    enumName: { type: String, default: '' },
    customList: { type: Array, default: () => [] },
    enumValue: { type: [Number, String, Boolean], default: 0 }
  })

  const { enumValue } = toRefs(props)
  const enumVal = ref()
  let enumObj = []
  watch(enumValue, (newValue) => {
    enumVal.value = enumObj[newValue]
  })

  onMounted(() => {
    if (props.enumName) {
      getEnumObj(props.enumName).then((res) => {
        enumObj = res
        enumVal.value = enumObj[props.enumValue]
      })
    }
    if (props.customList.length > 0) {
      enumObj = toObj(props.customList)
      enumVal.value = enumObj[props.enumValue]
    }
  })
</script>
